<template>
   <el-dialog :title="dialogTitle"
		@close="dialogClose"
		:visible="dialogVisible">
		<el-form :model="stuForm"
			:rules="stuRules"
			ref="addStuRuleForm">
			<el-form-item label="头像">
				<el-upload class="uploadAvatar"
					ref="uploadAvatar"
					action="https://chst.vip/students/uploadStuAvatar"
					list-type="picture-card"
					:on-success="uploadSuccess"
					:on-remove="removeAvatar"
					:limit="limit"
					name="headimgurl"
					:file-list="headimgList"
					:multiple="false">
					<i class="el-icon-plus"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="姓名"
				prop="name">
				<el-input v-model="stuForm.name"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="项目地址"
				prop="productUrl">
				<el-input v-model="stuForm.productUrl"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="班级"
				prop="class">
				<el-input v-model="stuForm.class"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="年龄"
				prop="age">
				<el-input v-model="stuForm.age"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="城市"
				prop="city">
				<el-input v-model="stuForm.city"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="学历"
				prop="degree">
				<el-input v-model="stuForm.degree"
					autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="描述"
				prop="description">
				<el-input v-model="stuForm.description"
					autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer"
			class="dialog-footer">
			<el-button @click="HIDE_DIALOG">取 消</el-button>
			<el-button type="primary"
				@click="confirmClick('addStuRuleForm')">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { mapState , mapMutations , mapActions } from "vuex"
import * as api from "../../api"
  export default {
    computed: {
			...mapState(['dialogVisible', 'dialogTitle',"currentRow"])
	},
	methods:{
      ...mapMutations(["SHOW_DIALOG","HIDE_DIALOG","CHANGE_DIALOG_TITLE"]),
      ...mapActions(["GET_STULIST"]),
	  dialogClose(){
		  this.HIDE_DIALOG()
		  this.stuForm = this.oldForm
		  this.headimgList = [] 
	  },
	  uploadSuccess(r){
         if(r.state){
			 this.stuForm.headimgurl = r.headimgurl
			 this.headimgList =[{url:r.headimgurl}]
			 this.limit = 1
		}else{
			this.$message.error("上传图片失败") 
		}
	  },
	  removeAvatar(){

	  },
	  confirmClick(formName){
           this.$refs[formName].validate((valid) =>{
			   if(valid){
                    if(this.dialogTitle === "增加学员信息"){
                        api.addStuListApi(this.stuForm)
						.then(res=>{
							if(res.data.state){
								this.HIDE_DIALOG()
                                this.GET_STULIST()
								this.stuForm = {}
								this.$message.success("增加成功")
							}else{
								this.$message.error("增加信息失败") 
							}
						})
					}else{
                      api.updateStuApi(this.stuForm)
					  .then(res =>{
						  if(res.data.state){
							  this.GET_STULIST()
							  this.$message.success("修改成功")
						  }else{
							  this.$message.error("更新信息失败")
						  }
					  })
					}
			   }else{
				  this.$message.error("请输入完整信息") 
			   }
		   })
	  }
	},
    data() {
      return {
        showAvatar: true,
		headimgList: [],//回显的头像
		limit: 1,//上传文件的数量
		stuRules: {
			name: [
			{ required: true, message: '请输入名字', trigger: 'blur' }
			],
			class: [
			{ required: true, message: '请输入班级', trigger: 'blur' }
			],
			degree: [
			{ required: true, message: '请输入学历', trigger: 'blur' }
			],
			city: [
			{ required: true, message: '请输入城市', trigger: 'blur' }
			],
			productUrl: [
			{ required: true, message: '请输入项目地址', trigger: 'blur' }
			],
			age: [
			{ required: true, message: '请输入年龄', trigger: 'blur' }
			],
			description: [
			{ required: true, message: '请输入描述', trigger: 'blur' }
			]},
        dialogTableVisible: false,
        dialogFormVisible: false,
        stuForm: {
                name:'',
				productUrl:'',
				headimgurl:'',
				class:'',
				age:'',
				city:'',
				degree:'',
				description:''
        },
		oldForm:{},
        formLabelWidth: '120px'
      };
    },
	watch:{
		currentRow(newVal){
			if(newVal){
				this.stuForm = this.currentRow
				this.headimgList =[{url:this.currentRow.headimgurl}]
				this.limit = 2
			}
		}
	},
	created () {
		this.oldForm = this.stuForm
	}
  };
</script>